<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="coordinates.latitude" :longitude="coordinates.longitude" :markers="covers">
				</map>
			</view>
			<view class="page_icons">
				<uni-icons type="map-pin-ellipse" size="30" color="royalblue" @click="chooseLocation()"></uni-icons>
				<uni-icons type="paperplane" size="30" color="royalblue" @click="shareLocation()"></uni-icons>
			</view>
			<view class="position_detail">
				<view v-show="show">
					<text>位置名称：{{coordinates.name}}</text>
					<text>所属区划：{{coordinates.province+coordinates.city+coordinates.district}}</text>
					<text>详细地址：{{coordinates.address}}</text>
				</view>
				<text>纬度：{{coordinates.latitude}}</text>
				<text>经度：{{coordinates.longitude}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 位置信息
				coordinates: {
					name:'天安门广场',
					address:'北京市东城区东长安街',
					province:'',
					city:'北京市',
					district:'东城区',
					latitude: 39.909,
					longitude: 116.39742
				},
				covers: [{
					id:0,
					latitude: 39.909,
					longitude: 116.39742,
					width: 74 + 'rpx',
					height: 74 + 'rpx',
					iconPath: '/static/image/location.png'
				}],
				show:false
			}
		},
		onShow() {
			let that = this;
			if(uni.getStorageSync("localtion_user")){
				let location = uni.getStorageSync("localtion_user");
				this.coordinates.latitude = location.latitude;
				this.coordinates.longitude = location.longitude;
				this.covers[0].latitude = location.latitude;
				this.covers[0].longitude = location.longitude;
			}else{
				this.show = false;
				uni.getLocation({
					type:'gcj02',
					success:function(res){
						/* 直接使用this找不到当前页面对象 */
						that.coordinates.latitude = res.latitude;
						that.coordinates.longitude = res.longitude;
						that.covers[0].latitude = res.latitude;
						that.covers[0].longitude = res.longitude;
					}
				})
			}
		},
		onLoad() {
			
		},
		methods: {
			/* 选择定位 */
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: res => {
						that.covers[0].latitude = res.latitude;
						that.covers[0].longitude = res.longitude;
						that.coordinates.name = res.name;
						that.coordinates.address = res.address;
						that.coordinates.latitude = res.latitude;
						that.coordinates.longitude = res.longitude;
						that.coordinates.province = res.address.slice(0, res.address.indexOf('省') + 1)
						that.coordinates.city = res.address.slice(res.address.indexOf('省') + 1, res.address.indexOf('市') + 1)
						that.coordinates.district = res.address.slice(res.address.indexOf('市') + 1, res.address.indexOf('区') + 1)
						that.show = true;
						uni.setStorageSync("localtion_user",that.coordinates);
					}
				});
			},
			/* 发送位置 */
			shareLocation(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.position_detail{
		color: royalblue;
	}
	.position_detail text{
		display: block;
		margin-top: 16rpx;
	}
	.page_icons{
		position: absolute;
		top: 300rpx;
		right: 20rpx;
	}
	.page_icons uni-icons{
		display: block;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
	}
</style>


